<script setup>
import {useForm} from "@inertiajs/vue3";
import useDialog from '@/composables/useDialog'
import useLoading from '@/composables/useLoading'
import useRequest from '@/composables/useRequest'
import {Message} from "@arco-design/web-vue";
import ImageUpload from '@/components/upload/image.vue'
import Editor from '@/components/editor/MdEditor.vue'


const {FormRef, visible, mode, pk, actionName, width} = useDialog()
const {loading, setLoading} = useLoading()

const {createApi, updateApi, showApi} = useRequest('admin.content.articles')

const emit = defineEmits(["success", "close"]);


const imageList = ref([
    {
        label: 'PHP',
        value:'https://www.ahimu.com/static/images/0f381d0f-14d5-4074-812e-7ed0c4792308.jpg',
    },
    {
        label: 'Vue',
        value:'https://www.ahimu.com/static/images/cb667dfd-61a0-402f-9b4f-4fcfabcdd3f7.jpg',
    },
    {
        label: 'vite',
        value:'https://www.ahimu.com/static/images/1c93c479-5c83-4ca1-aad6-79af0b40a79e.jpg ',
    },
    {
        label: 'Nginx',
        value:'https://www.ahimu.com/static/images/7c0c6224-e9f7-4730-95f0-f31c9836ef7d.jpg',
    },
    {
        label: 'MySQL',
        value: 'https://www.ahimu.com/static/images/eebae276-2253-4b5d-812c-2340adbbe97e.jpg'
    },
    {
        label: 'Laravel',
        value: 'https://www.ahimu.com/static/images/2688be2e-c395-4475-bd4c-5bbbaea460c9.jpg '
    }
])

const fieldNames = {
    value: 'id',
    label: 'name',
}

const form = useForm({
    category_id: '',
    title: '',
    author: '人称外号大脸猫',
    cover: '',
    keywords: '',
    description: '',
    markdown: '',
    sort: 50,
    status: 1,
    clicks: 10,
    tag_ids: [],
})

const rules = {
    title: [{required: true, message: '请输入文章标题', trigger: 'blur'}],
    status: [{required: true, message: '请选择文章状态'}],
    sort: [{required: true, message: '请输入文章排序'},],
}



const handleSubmit = async () => {
    try {
        setLoading(true)
        const res = await FormRef.value?.validate()
        if (res) return false
        const apiMethod = mode.value === 'edit'
            ? () => updateApi(pk.value, form)
            : () => createApi(form)
        await apiMethod()
        Message.success(`${actionName.value}成功`)
        emit('success')
    } catch (error) {
        return false
    } finally {
        setLoading(false)
    }
}

const handleClose = () => {
    FormRef.value?.resetFields()
    form.reset()
    emit('close')
}

// 打开弹窗
const add = async () => {
    mode.value = 'add'
    visible.value = true
}

const edit = async (id) => {
    try {
        setLoading(true)
        pk.value = id
        const {data} = await showApi(id)
        Object.assign(form, data)
        mode.value = 'edit'
        visible.value = true
    } finally {
        setLoading(false)
    }
}

defineExpose({add, edit})
</script>
<template>
    <a-drawer
        v-model:visible="visible"
        :loading="loading"
        :title="`${actionName}`"
        width="calc(100% - 300px)"
        @close="handleClose"
        @before-ok="handleSubmit"
    >
        <a-spin :loading="loading" class="w-full">


            <a-form ref="FormRef" :model="form" :rules auto-label-width>
                <a-form-item field="category_id" label="所属栏目">
                    <a-select
                        v-model="form.category_id"
                        :field-names="fieldNames"
                        :options="$page.props.categories"
                        placeholder="请选择所属分类"
                    />
                </a-form-item>

                <a-form-item field="title" label="文章标题">
                    <a-input
                        v-model.trim="form.title"
                        allow-clear
                        placeholder="请输入文章标题"
                    />
                </a-form-item>

                <a-form-item field="keywords" label="文章标签">
                    <a-select
                        v-model="form.tag_ids"
                        :field-names="fieldNames"
                        :max-tag-count="5"
                        :options="$page.props.tags"
                        multiple
                        placeholder="请选择文章标签"
                    />
                </a-form-item>
                <a-form-item :content-flex="true" content-class="flex-col gap-2 items-start" field="category_id" label="缩略图">
                    <a-select
                        v-model="form.cover"
                        :options="imageList"
                        placeholder="请选择缩略图"
                    />
                    <a-input
                        v-model.trim="form.cover"
                        allow-clear
                        placeholder="请输入上传缩略图"
                    />
                    <div class="w-full  flex justify-start items-start">
                        <image-upload v-model="form.cover"  />
                    </div>

                </a-form-item>

                <a-form-item field="keywords" label="文章关键词">
                    <a-input
                        v-model="form.keywords"
                        allow-clear
                        placeholder="请输入文章关键词"
                    />
                </a-form-item>

                <a-form-item field="description" label="文章描述">
                    <a-input
                        v-model="form.description"
                        allow-clear
                        placeholder="请输入文章描述"
                    />
                </a-form-item>

                <a-form-item field="markdown" label="文章内容">
                    <Editor v-model="form.markdown" />
                </a-form-item>

                <a-form-item field="author" label="作者">
                    <a-input
                        v-model="form.author"
                        allow-clear
                        placeholder="请输入文章作者"
                    />
                </a-form-item>
                <a-form-item field="sort" label="排序">
                    <a-input-number v-model="form.sort" :min="1" mode="button" placeholder="请输入排序"/>
                </a-form-item>

                <a-form-item field="clicks" label="浏览量">
                    <a-input-number v-model="form.clicks" :min="1" :step="10" mode="button" placeholder="请输入浏览量"/>
                </a-form-item>

                <a-form-item field="status" label="状态">
                    <a-radio-group v-model="form.status">
                        <a-radio :value="1">显示</a-radio>
                        <a-radio :value="0">隐藏</a-radio>
                    </a-radio-group>
                </a-form-item>
            </a-form>
        </a-spin>
    </a-drawer>
</template>

<style scoped>

</style>
